// gplus-youtubeembed - Makes embedded YouTube video iframes Google+ style to improve page loading speed.
// Copyright (c) 2013 by Arun - http://www.skipser.com
// Licensed under the GNU LGPL license: http://www.gnu.org/copyleft/lesser.html
// For usage details, read - http://www.skipser.com/510

// Call this function at the end of the closing </body> tag.
function optimizeYouTubeEmbeds() {
    // Get all iframes
    var frames = document.getElementsByTagName( 'iframe' );
    
    // Loop through each iframe in the page.
    for ( var i = 0; i < frames.length; i++ ) {

        // Find out youtube embed iframes.
        if ( frames[ i ].src && frames[ i ].src.length > 0 && frames[ i ].src.match(/http(s)?:\/\/www\.youtube\.com/)) {

            // For Youtube iframe, extract src and id.
            var src=frames[i].src;
            var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
            var id=(src.match(p) ? RegExp.$1 : false);
            if(id == false) { continue;}
            
            // Get width and height.
            var w=frames[i].width;
            var h=frames[i].height;
            if(src == '' || w=='' || h=='') {continue;}
            
            // Thease are to position the play button centrally.
            var pw=Math.ceil(w/2-38.5);
            var ph=Math.ceil(h/2+38.5);    
            
            // The image+button overlay code.
            var code='<div alt="For this Google+ like YouTube trick, please see http://www.skipser.com/510" style="width:'+w+'px; height:'+h+'px; margin:0 auto"><a href="#"  onclick="LoadYoutubeVidOnPreviewClick(\''+id+'\','+w+','+h+');return false;" id="skipser-youtubevid-'+id+'"><img src="http://i.ytimg.com/vi/'+id+'/hqdefault.jpg" style="width:'+w+'px; height:'+h+'px;" /><div style="background: url(\'\') no-repeat scroll 0 0 transparent;height: 77px;width: 77px; position:relative; margin-left:'+pw+'px; margin-top:-'+ph+'px;z-index:5;"></div></a></div>';

            // Replace the iframe with a the image+button code.
            var div = document.createElement('div');
            div.innerHTML=code;
            div=div.firstChild;
            frames[i].parentNode.replaceChild(div, frames[i]);
			i--;
        }
    }
}
// Replace preview image of a video with it's iframe.
function LoadYoutubeVidOnPreviewClick(id,w ,h) {
    var code='<iframe src="https://www.youtube.com/embed/'+id+'/?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1" width="'+w+'" height="'+h+'" frameborder=0 allowfullscreen style="border:1px solid #ccc;" ></iframe>';
    var iframe = document.createElement('div');
    iframe.innerHTML=code;
    iframe=iframe.firstChild;
    var div=document.getElementById("skipser-youtubevid-"+id);
    div.parentNode.replaceChild( iframe, div)
}



/* This code uses jquery
function optimizeYouTubeEmbeds1() {    
    // Loop through each iframe in the page.
    $('iframe').each(function(index,item) {
        // Check if the ifram is a YouTube video.
        if($(item).attr('src') && $(item).attr('src').match(/http(s)?:\/\/www\.youtube\.com/)) {
            // Get the video src, width and height.
            var src=$(item).attr('src');
            var w=$(item).attr('width');
            var h=$(item).attr('height');
            
            // Thease are to position the play button centrally.
            var pw=Math.ceil(w/2-38.5);
            var ph=Math.ceil(h/2+38.5);
            
            //Extract the YouTube video id.
            var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
              var id=(src.match(p) ? RegExp.$1 : false);
            if(id == false) { return true; }
            
            // This is the preview image + play button code. On clicking the image, LoadYoutubeVidOnPreviewClick function will get called.
            var code='<div style="width:'+w+'px; height:'+h+'px; margin:0 auto"><a href="#"  onclick="LoadYoutubeVidOnPreviewClick(\''+id+'\','+w+','+h+');return false;" id="skipser-youtubevid-'+id+'"><img src="http://i.ytimg.com/vi/'+id+'/hqdefault.jpg" style="width:'+w+'px; height:'+h+'px;" />'+
                     '<div style="background: url(\'\') no-repeat scroll 0 0 transparent;height: 77px;width: 77px; position:relative; margin-left:'+pw+'px; margin-top:-'+ph+'px;z-index:5;"></div></a></div>';
                     
            // Replace the existing iframe with the image code.
            $(item).after(code);
            $(item).remove();
        }
    });
}
// Replace preview image of a video with it's iframe.
function LoadYoutubeVidOnPreviewClick1(id,w ,h) {
    var code='<iframe src="https://www.youtube.com/embed/'+id+'/?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1" width="'+w+'" height="'+h+'" frameborder=0 allowfullscreen style="border:1px solid #ccc;" ></iframe>';
    $("#skipser-youtubevid-"+id).after(code);
    $("#skipser-youtubevid-"+id).remove();
}
*/